iT邦幫忙

0

[ES6-重點紀錄] 其他的 API 與特性擴展

  • 分享至 

  • xImage
  •  

在 JavaScript ES6 標準規範中,其實還有很多的新擴展、新語法、新 API 都很有特色,只是這些就比較不常用了,大部分的功能也都能使用舊方法去實現,至少這些新事物能幫助簡化程序就是一大進步了。

本篇將會簡單地介紹 ES6 其他較實用常見的 API 與擴展,主要知道基本內容就好,並不會深入探討。

JavaScript ES6 其他常見的新 API

Promise 物件

Set 物件

  • 這是新的資料結構物件,Set 類似於陣列,但內容成員不會有重複的值
  • 放入有重複的值將會被覆蓋,內容成員總數不變
  • 與 Map 物件一樣都有類似的操作方法與迭代方法
let set = new Set();

// 可以使用 add() 方法設置資料內容
set.add(10);
set.add(10);
set.add('text');
set.add({sayHi: 'Hi'});

console.log(map);
// Set(4) {10, "text", {sayHi: "Hi"}}

Proxy 物件

  • 概念為重新定義 JavaScript 中某些操作的原始行為,攔截那些操作方法去改變它
  • 應用範例 :
    • 利用 Proxy 可以讓 "讀取 Object 的屬性值" 轉變為 "執行某個函數",從而實現屬性的方法操作,不需要建立函數
    • 利用 Proxy 可以讓 "設定 Object 的屬性值" 作為 "數據綁定",發生變化時就會自動更新 DOM 與瀏覽器上的渲染
// 這是基本語法
var proxy = new Proxy(target, handler);

// 此用來攔截變數的 "物件內容",改變它的原始行為 
var proxy = new Proxy({}, {
    get: function(target, propKey, receiver) {
        return 'getting';
    },
    set: function(target, propKey, value, receiver) {
        console.log('setting');
    }
});

console.log(proxy.test);  // 'getting' 
console.log(proxy.other); // 'getting' 

// 以下都會執行 console.log('setting');
proxy.abc = 10; 
proxy[10] = 'test'; 

Reflect 物件

  • 概念也是攔截 JavaScript 中某些操作方法去改變它
  • Reflect 可以在 Proxy 的內部方法調用,確保該操作方法會執行原始的行為,然後再執行 Proxy 內定義的額外的功能
  • 另外 Reflect 物件的其他用途
    • 可以用來取代 Object 原型中部分的操作方法,改善了一些物件原始結構的問題

Generator 生成器函數

  • 它有點類似一般的函數,使用關鍵詞function*
  • Generator 的運作概念就像是一個狀態機 (state machine),會一直改變內部的不同狀態
  • 取得的 Generator 物件,起始狀態會先暫停什麼都不做,而每次執行next()方法,就會繼續執行函數,直到遇到下一個 yield 關鍵字,又會暫停函數的執行,而每一次暫停時會 yiled (產出)一個當前狀態值
  • yiled 會返回一個{value: anyType, done: boolean}結構的物件
  • Generator 產生的物件也有 Iterator 的性質,所以可以用for...of迭代迴圈去取得 yield 返回的 value 值
function* gen() { 
    yield 1;
    yield 2;
}

var g = gen();

// 第一次執行 next() - 停在 yield 1
// 返回 Object {value: 1, done: false}
g.next(); 

// 第二次執行 next() - 停在 yield 2
// 返回 Object {value: 2, done: false}
g.next(); 

// 第三次執行 next() - 沒有 yield 將會結束
// 返回 Object {value: undefined, done: true}
g.next(); 

JavaScript ES6 其他較實用的擴展

  • 字串 (Sting) 可使用 Unicode 表示法
// Unicode 表示法
console.log("\u{41}\u{42}\u{43}"); // ABC
  • 數值 (Number) 可以使用二進制和八進製表示法
    • 前綴須加上0b(或0B)、0o(或0O)表示
  • 數值 (Number) 可以使用**關鍵字當作指數運算
// 二進制和八進製表示法
console.log(0b1100011); // 99
console.log(0o143); // 99

// 指數運算
console.log(2**6); // 64

JavaScript ES6 其他新功能 - 參考網址


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言